<template>
  <view class="car-wash-item">
    <view class="img">
      <image class="img" :src="defaultImg"></image>
    </view>
    <view class="info-box">
      <view class="title">
        <text>{{item.station_Name}}</text>
        <text class="status" v-if="item.lastBeenTo">上次洗车点</text>
        <text class="status" v-else-if="item.hasBeenTo">去过</text>
      </view>
      <view class="info">
        <view class="left">
          <i-icon icon="iconshijian" size='28rpx'></i-icon>
          <text class="text">营业时间：{{item.open_Time || ''}}</text>
        </view>
      </view>
      <view class="info">
        <view class="left">
          <i-icon icon="icontingche" size='28rpx'></i-icon>
          <text class="text">{{item.park || '未知'}}</text>
        </view>
      </view>
      <view class="info">
        <view class="left">
          <i-icon icon="iconzuobiaoweizi" size='28rpx'></i-icon>
          <text class="text">{{item.address}}</text>
        </view>
        <view class="right" @click="onNavigation">
          <i-icon icon="icondaohang1" color="#FBD321" size="28rpx"></i-icon>
          <text>{{item.distance}}km</text>
        </view>
      </view>
      <view class="parking-status" v-for="(i, k) in item.selfServiceCarWashMachineList" :key="k">
        <text>洗车机{{k+1}} 状态：</text>
				<view  class="flex flex-ai-c">
					<view class="dot" v-if="i.state === 'free'"></view>
					<view class="dot" v-if="i.state === 'busy'" style="background-color: #FFA700;"></view>
					<view class="dot" v-if="i.state === 'repair'" style="background-color: #2D83FA;"></view>
					<view class="dot" v-if="i.state === 'time'" style="background-color: #EA5C35;"></view>
					<view class="dot" v-if="i.state === 'maintain'" style="background-color: #aaa;"></view>
					<view>{{i.state | formatState}}</view>
				</view>
      </view>
      <!-- <view class="parking-status">
        <text>洗车位1状态：</text>
        <view class="dot busy"></view>
        <text>忙碌</text>
      </view>
      <view class="parking-status">
        <text>洗车位1状态：</text>
        <view class="dot repair"></view>
        <text>维修</text>
      </view> -->
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      defaultImg: 'https://files.yzsheng.com/client/selfwash/default_1.png'
    }
  },
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
	created() {
		// console.log(this.item.selfServiceCarWashMachineList,'121233')
	},
  filters: {
    formatState(data) {
      let text = ''
      if(data === 'free') {
        text = '空闲'
      } else if(data === 'busy') {
        text = '忙碌'
      } else if(data === 'repair') {
        text = '维修中'
      } else if(data === 'time') {
        text = '非营业时间'
      } else if(data === 'maintain') {
        text = '停机/故障'
      } else {
        text = '未知'
      }
      return text
    }
  },
  methods: {
    onNavigation() {
      uni.openLocation({
        latitude: Number(this.item.lat),
        longitude: Number(this.item.lon)
      })
    }
  }
}
</script>

<style lang="scss">
.car-wash-item{
  background-color: #fff;
  box-shadow: 0 0 10rpx 0 rgba(0, 0, 0, 0.1);
  border-radius: 10rpx;
  margin: 0 24rpx 16rpx;
  padding: 32rpx 24rpx 20rpx;
  display: flex;
  .img{
    width: 140rpx;
    height: 176rpx;
    border-radius: 10rpx;
    .img{
      width: 140rpx;
      height: 176rpx;
      border-radius: 10rpx;
    }
  }
  .info-box{
    margin-left: 18rpx;
    flex: 1;
    .title{
      font-size: 28rpx;
      color: #333;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .status{
        color: #999;
        font-size: 24rpx;
      }
    }
    .info{
      height: 50rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .left{
        color: #999;
        font-size: 24rpx;
        display: flex;
        align-items: flex-end;
				
				
        .iconfont{
          margin-top: 4px;
          margin-right: 12rpx;
        }
        .text{
          display: block;
          flex: 1;
          overflow: hidden;
          word-break: break-all;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }
      }
      .right{
        margin-left: 20rpx;
        display: flex;
        align-items: center;
        text{
          font-size: 24rpx;
          color: #666;
          margin-left: 10rpx;
        }
      }
    }
    .parking-status{
      height: 50rpx;
      display: flex;
      align-items: center;
      font-size: 24rpx;
      color: #333;
      .dot{
        width: 20rpx;
        height: 20rpx;
        border-radius: 20rpx;
        background-color: #17CA52;
        margin: 0 12rpx;
      }
      .busy{
        background-color: #F59435;
      }
      .repair{
        background-color: #aaa;
      }
    }
  }
}
</style>
